<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-12-02 04:33:33
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-21 11:25:14
 * @FilePath: \company-world\src\views\home\components\ApplicationMarket.vue
 * @Description: 侧边栏菜单图标选择
-->
<template>
  <div>
    <el-drawer v-model="show" title="菜单组" :with-header="false">
      <span>菜单组</span>
      <!-- 菜单图标 -->
      <div class="menu-container" v-if="menusList && menusList.length">
        <div v-for="(route, index) in menusList" :key="index + route.name" class="menu-item">
          <div class="menu-item-container" v-if="!route.is_show">
            <el-tooltip effect="dark" placement="right" :content="route.name" :show-after="100">
              <div
                :class="{ active: activeIndex === index }"
                class="icon-label-container"
                @click="handleItemClick(route.is_show, route.id, index)"
                :style="{ backgroundColor: route.background_color }"
              >
                <i :class="'iconfont ' + route.icon"></i>
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
      <footer class="footer">
        <el-button color="#6C52EA" @click="handleSave()">保存</el-button>
        <el-button class="button" @click="handleClose()">取消</el-button>
      </footer>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { editMenuData } from '@/apis/jurisdiction/menu'
const props = defineProps({
  // 抽屉显示隐藏
  showMenu: {
    type: Boolean,
    required: true,
    default: false
  },
  // 侧边菜单栏数据
  menusList: {
    type: Object,
    required: true,
    default: () => {
      return []
    }
  }
})
const emit = defineEmits(['handleSave'])
const show = ref(false)
watch(
  () => props.showMenu,
  (newVal) => {
    show.value = newVal
  }
)
/**
 * @desc: 添加菜单
 */
// 菜单图标的显示隐藏
const isShow = ref(0)
const id = ref(0)
const activeIndex = ref('')
const handleItemClick = (data: number, val: number, num: string) => {
  isShow.value = data
  isShow.value = 1
  id.value = val
  activeIndex.value = num
}
/**
 * @desc: 确定
 */
const loading = ref(false)
const handleSave = () => {
  show.value = !show.value
  loading.value = true
  editMenuData(
    {
      is_show: isShow.value,
      _id: id.value
    },
  )
    .then((res) => {
      if (!res) return
      emit('handleSave')
      loading.value = false
    })
    .catch(() => {
      ElMessage('服务器内部错误！')
      loading.value = false
    })
}
/**
 * @desc: 取消
 */
const handleClose = () => {
  show.value = !show.value
}
</script>

<style lang="less" scoped>
.active {
  border: 1px solid #000000;
}
.button {
  color: #6c53ea;
}
.button:hover {
  color: #6c53ea;
  border-color: #6c53ea;
  opacity: 0.8;
}
.menu-container {
  position: relative;
  overflow-y: auto;
  padding: 0 4px;
  box-sizing: border-box;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  .menu-item {
    width: 100%;
    margin-top: 6px;
    box-sizing: border-box;
    .menu-item-container {
      display: flex;
      align-items: center;
      overflow: hidden;
      height: 52px;
      text-align: center;
      i {
        flex: 1;
        line-height: 28px;
      }
      .icon-label-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        border-radius: 4px;
        i {
          flex: 1;
          line-height: 28px;
        }
        span {
          flex: 1;
          overflow: hidden;
          line-height: 18px;
          font-size: 12px;
          color: #fff;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
.footer {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>
